<template>
    <n-space style="margin-left: 5%;">
        <n-button type="primary">更新排名</n-button>
        <n-input placeholder="搜索学号" style="width: 300px;">
            <template #prefix><n-icon><search-icon /></n-icon></template>
        </n-input>
        <n-button type="primary">搜索</n-button>
    </n-space>
    <n-data-table
        :columns="columns"
        :data="rank"
        style="margin-top: 20px; margin-left: 5%; width: 90%;"
    />
</template>

<style>
</style>

<script lang="ts">
import { defineComponent, h, render } from "vue";
import { NButton, NTag } from "naive-ui";
import { SearchOutline as SearchIcon } from "@vicons/ionicons5";
import router from "@/router";

const createColumns = (titleLen: number) => {
    let columns = [
        {
            title: '排位',
            key: 'rankNo',
            align: 'center',
            style: {}
        },
        {
            title: '学号',
            key: 'account',
            align: 'center',
            render(row: any) {
                const btn = h(NButton, {
                    text: true,
                    onclick: () => router.push('/user/' + row.account)
                },
                    { default: () => row.account })
                return btn;
            }
        },
        {
            title: '姓名',
            key: 'name',
            align: 'center'
        },
        {
            title: '用时',
            key: 'timeUsage',
            align: 'center'
        },
    ];
    for (let i = 0; i < titleLen; i++) {
        columns.push({
            title: String.fromCharCode('A'.charCodeAt(0) + i),
            key: String.fromCharCode('A'.charCodeAt(0) + i),
            align: 'center',
            render(row: any) {
                if (eval('row.' + String.fromCharCode('A'.charCodeAt(0) + i)) != '') {
                    const tag = h(NTag, {
                        type: eval('row.' + String.fromCharCode('A'.charCodeAt(0) + i)) == 'success' ? 'primary' : 'error'
                    },
                        { default: () => eval('row.' + String.fromCharCode('A'.charCodeAt(0) + i)) })
                    return tag;
                }
                else {
                    return h('div')
                }
            }
        })
    }
    return columns;
}

export default defineComponent({
    props: {
        questionLength:{
            type: Number,
            required: true
        }
    },
    components: {SearchIcon},
    setup(props) {
        return {
            columns: createColumns(props.questionLength),
            rank: [
                { rankNo: 1, account: '201904020227', name: '陈可桐', timeUsage: '00:40:23', A: 'success', B: 'success', C: 'success', D: 'failed' },
                { rankNo: 2, account: '201904020228', name: 'JohnDoe', timeUsage: '00:39:43', A: 'success', B: 'success', C: 'failed', D: '' }
            ]
        }
    }
})
</script>